<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
    <meta charset="utf-8"/>
    <title>员工表</title>
    <style>
        .emp_contaner {
            text-align: center;
            height: 100%;
            padding-top: 10px;
            padding-bottom: 40px
        }

        table {
            width: 90%;
            height: 50px;
            border-collapse: collapse; /*设置表格的边框折叠成一个单一的边框*/
            margin: 0 auto; /*设置表格居中*/
            background-color: white;
        }

        table, tr, td, th {
            border: 1px solid black; /*边框：大小 实线 颜色*/
            text-align: center; /*表格内容居中*/
            padding: 10px; /*内边距*/
        }

        th {
            background-color: green;
            color: white;
        }

        tr:hover {
            color: #FF00FF;
            background-color: #ADD8E6;
        }

/*          a:link, a:visited /* 未访问链接*/  */
         { 
            display: block; 
            font-weight: bold; 
             color: #FFFFFF;
             background-color: #98bf21; 
            text-align: center; 
            padding: 4px; 
             text-decoration: none;
         } 

/*           a:hover, a:active /* hover 鼠标移动到链接上,active鼠标点击时 */  */
         { 
             background-color: #7A991A; 
         }

    </style>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        function allCheckbox() {
            var trs = document.getElementById("tab").getElementsByTagName("tr");

            for (var i = 1; i < trs.length; i++) {
                document.write(trs[i].getElementsByTagName("td")[0].innerHTML);
            }

        }

        function allCheckboxOne() {
            var names = document.getElementsByName("checkbox");
            var allcheckbox = document.getElementById("allcheckbox");
            for (var i = 0; i < names.length; i++) {
                if (allcheckbox.checked == true) {
                    names[i].checked = true;
                } else {
                    names[i].checked = false;
                }
            }
        }

        /*根据单个复选框的选择情况确定全选复选框是否被选中*/
        function selectSingle() {
            var k = 0;
            var oInput = document.getElementsByName("checkbox");
            for (var i = 0; i < oInput.length; i++) {
                if (oInput[i].checked == false) {
                    k = 1;
                    break;
                }
            }
            if (k == 0) {
                document.getElementById("allcheckbox").checked = true;
            }
            else {
                document.getElementById("allcheckbox").checked = false;
            }
        }

    </script>
    <script type="text/javascript">
        $(function () {
            //选取偶数位置的 <tr> 元素
            var even_color = "#cccccc";
            var odd_color = "#ECFFFF";
            var select_color = "#CECEFF";

            $("tr:even").css("background-color", even_color);
            $("tr:odd").css("background-color", odd_color);


            $("tr").mousemove(function () {
                $(this).css("background-color", select_color);
            });
            $("tr").mouseout(function () {
                $("tr:even").css("background-color", even_color);
                $("tr:odd").css("background-color", odd_color);
            });


            $("tr").click(function () {
                if ($(this).find("input").prop("checked") == true) {
                    //已选中的行取消选中
                    $(this).find("input").prop("checked", false);

//						$("tr:even").css("background-color",even_color);
//						$("tr:odd").css("background-color",odd_color);
                } else {
                    //未选中的行，进行选中
                    $(this).find("input").prop("checked", true);
//						$(this).css("background-color",select_color);
                }

            });
        });
        function deleteRow(r) {
            var i = r.parentNode.parentNode.rowIndex;
            document.getElementById('tab').deleteRow(i);
        }

        function deleteBatchRow() {
            var obj = $(":checked");
            for (var i = 0; i < obj.length; i++) {
                var k = obj[i].parentNode.parentNode.rowIndex;
                document.getElementById('tab').deleteRow(k);
            }
        }

        function updateDepartName(obj) {
            var name = window.prompt("请输入新的员工名");
//            var departName = window.prompt("请输入新的部门名");
            var node = obj.parentNode.parentNode;
            var tds = node.getElementsByTagName("td");
            tds[2].innerHTML = name;
//            tds[3].innerHTML = departName;
        }
    </script>
</head>
<body>
<div class="emp_contaner">
    <h3>员工信息表</h3>
    <table id="tab">
        <tr>
            <th>全选<input type="checkbox" id="allcheckbox" onclick="allCheckboxOne()"/></th>
            <th>员工编号</th>
            <th>员工名称</th>
            <th>员工部门</th>
            <th colspan="2">操作</th>
        </tr>
        <tr id="t1">
            <td><input type="checkbox" name="checkbox" onclick="selectSingle();"/></td>
            <td>1001</td>
            <td>张三</td>
            <td>财务部</td>
            <td><a href="#" onclick="deleteRow(this)">删除</a></td>
            <td><a href="#" onclick="updateDepartName(this)">修改</a></td>
        </tr>

        <tr>
            <td><input type="checkbox" name="checkbox" onclick="selectSingle();"/></td>
            <td>1002</td>
            <td>李四</td>
            <td>人事部</td>
            <td><a href="#" onclick="deleteRow(this)">删除</a></td>
            <td><a href="#" onclick="updateDepartName(this)">修改</a></td>
        </tr>

        <tr>
            <td><input type="checkbox" name="checkbox" onclick="selectSingle();"/></td>
            <td>1003</td>
            <td>王二</td>
            <td>人事部</td>
            <td><a href="#" onclick="deleteRow(this)">删除</a></td>
            <td><a href="#" onclick="updateDepartName(this)">修改</a></td>
        </tr>

        <tr>
            <td><input type="checkbox" name="checkbox" onclick="selectSingle();"/></td>
            <td>1004</td>
            <td>张三</td>
            <td>财务部</td>
            <td><a href="#" onclick="deleteRow(this)">删除</a></td>
            <td><a href="#" onclick="updateDepartName(this)">修改</a></td>
        </tr>

        <tr>
            <td><input type="checkbox" name="checkbox" onclick="selectSingle();"/></td>
            <td>1005</td>
            <td>李四</td>
            <td>人事部</td>
            <td><a href="#" onclick="deleteRow(this)">删除</a></td>
            <td><a href="#">修改</a></td>
        </tr>

        <tr>
            <td><input type="checkbox" name="checkbox" onclick="selectSingle();"/></td>
            <td>1006</td>
            <td>王二</td>
            <td>人事部</td>
            <td><a href="#" onclick="deleteRow(this)">删除</a></td>
            <td><a href="#">修改</a></td>
        </tr>
        <tr>
            <td colspan="4"></td>
            <td colspan="2"><a href="#" onclick="deleteBatchRow()">批量删除</a></td>

        </tr>

    </table>

</div>
</body>
</html>